<template>
    <div class="timeTools">
        <van-nav-bar
                title="时间工具"
                class="header"
                left-text=""
                left-arrow
                @click-left="goBackPage('/selfmanage')"
        />
        <div class="van-doc-intro van-doc-bottom">
            <h3 class="vanHeader">军事标准时间</h3>
            <p>{{localDate}}</p>
            <p>{{localTime}}</p>
        </div>
        <div class="van-doc-intro van-doc-bottom">
            <h3 class="vanHeader">作战时间</h3>
            <p>{{settingDate}}</p>
            <p>{{settingTime}}</p>
        </div>
        <div class="van-doc-intro">
            <h3 class="vanHeader">设置作战时间</h3>

            <van-field
                    v-model="junTime"
                    left-icon="setting-o"
                    center
                    disabled
                    clearable
                    label="作战时间"
                    placeholder="请选择时间">
                <template #button>
                    <van-icon name="apps-o" @click="show=true"/>
                </template>
            </van-field>


            <van-field
                    v-model="onceNum"
                    left-icon="setting-o"
                    center
                    clearable
                    label="步长"
                    placeholder="请输入0-120数字">
                <template #button>
                    <van-button size="small" class="btn_grey" @click="settingNum">保存</van-button>
                </template>
            </van-field>

            <van-popup v-model="show" round position="bottom">
                <van-datetime-picker
                        @cancel="show=false"
                        @confirm="show=false;showPicker=true"
                        v-model="currentDate"
                        type="date"
                        title="选择年月日"
                />
            </van-popup>

            <van-popup v-model="showPicker" round position="bottom" @opened="handlePopupOpen">
                <van-picker
                        ref="picker"
                        show-toolbar
                        :columns="columns"
                        @cancel="showPicker = false"
                        @change="onPickerChange"
                        swipe-duration="500"
                        visible-item-count="5"
                >
                    <div class="picker-title">选择时间
                        <a size="small" class="a_grey a_right" @click="timeCheck">确定</a>
                    </div>
                </van-picker>
            </van-popup>

        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                localDate: '',
                localTime: '',

                settingDate:'',
                settingTime:'',



                columns:[
                    {
                        values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
                        defaultIndex: 0
                    },
                    {
                        values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
                        defaultIndex: 0
                    },
                    {
                        values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
                        defaultIndex: 0
                    }
                ],

                show: false,
                showPicker: false,
                currentDate:null,
                currentTime:null,

                time:null,
                junTime:null,

                onceNum:60,
                junNum:60,
            }
        },
        methods: {
            goBackPage(url){
                this.$router.push(url);
            },
            getLocalTime() {
                let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                let time = new Date();

                let year = time.getFullYear();
                let month = time.getMonth() + 1;
                let day = time.getDate();
                let week = weeks[time.getDay()];
                let hour = time.getHours();
                let minutes = time.getMinutes();
                let seconds =time.getSeconds();
                if(minutes<10){
                    minutes='0'+minutes
                }
                if(seconds<10){
                    seconds='0'+seconds
                }
                this.localDate = year + '/' + month + '/' + day + " " + week;
                this.localTime = hour + "：" + minutes+": "+seconds;
            },

            settingNum(){
                this.junNum=this.onceNum;
            },
            getJunTime(){
                let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

                let time =new Date(Date.parse(this.time)+this.junNum*1000);

                this.time=this.formatDateTime(time);
                let year = time.getFullYear();
                let month = time.getMonth() + 1;
                let day = time.getDate();
                let week = weeks[time.getDay()];
                let hour = time.getHours();
                let minutes = time.getMinutes();
                let seconds =time.getSeconds();
                if(minutes<10){
                    minutes='0'+minutes
                }
                if(seconds<10){
                    seconds='0'+seconds
                }
                this.settingDate = year + '/' + month + '/' + day + " " + week;
                this.settingTime = hour + "：" + minutes+"："+seconds;
            },

            handlePopupOpen() {
                const value = this.$refs.picker.getValues();
                const str = value.join(':');
                this.currentTime = str;

            },
            onPickerChange(el, value) {
                const str = value.join(':')
                this.currentTime = str;
            },

            formatDateTime(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h=h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                var second=date.getSeconds();
                second=second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
            },
            formatNYR(date){
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            timeCheck(){
                this.currentDate=this.formatNYR(this.currentDate);
                this.time=this.currentDate+' '+this.currentTime;
                this.junTime=this.currentDate+' '+this.currentTime;
                this.show=false;
                this.showPicker=false;
            }
        },
        mounted() {
            this.time=this.formatDateTime(new Date());
            this.junTime=this.formatDateTime(new Date());
            this.getLocalTime();
            this.getJunTime();

            setInterval(() => {
                this.getLocalTime();
                this.getJunTime();
            }, 1000);

        }
    };
</script>

<style scoped>
    .timeTools{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .timeTools .header{
        color: #ffffff;
        background-color: #153744;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }
    .van-doc-intro {
        padding: 1rem 0.5rem;
        margin: 0 0.5rem;
        text-align: center;
        color: #153744;
    }
    .van-doc-bottom{
        border-bottom: #cfc7c7 1px solid;
    }
    .van-doc-intro .vanHeader{
        text-align: left;
    }
    .picker-title{
        text-align:center;
        width: 100%;
    }
    .btn_grey{
        background-color: #153744;
        color: #ffffff;
        border: #153744 1px solid;
    }
    .a_grey{
        color: #153744;
    }
    .a_right{
        right: 1rem;
        display: inline-block;
        position: absolute;
    }
</style>
